<template>
  <div class="page-container">
    <div class="info-container">
      <div class="info-container_header">
        <div class="title">能耗详情</div>
      </div>
      <div class="info-container_body">
        <el-form ref="refFrom" label-position="top" :model="form.model" class="demo">
          <div class="form-section">
            <div class="form-section_title">结算信息</div>
            <AgelFormDesc :items="form.baseItems" :column="24"> </AgelFormDesc>
          </div>
          <div class="form-section">
            <div class="form-section_title">电费台账</div>
            <EnergyRecord :station="orderId"></EnergyRecord>
          </div>
        </el-form>
      </div>
      <div class="info-container_footer">
        <el-button @click="handleCancel">返回</el-button>
      </div>
    </div>

  </div>
</template>

<script setup name="StationEnergyInfo" lang="tsx">
import { getEnergySummary } from '@/api/station/energy/index';
import { defaultEnergyModel } from '@/api/station/energy/types';
import EnergyRecord from '../common/energy-record/index.vue'

const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const { epay_type } = toRefs<any>(proxy?.useDict('epay_type'));

const route = useRoute();
const orderId = toRef<string>(route.query.id as string)

const form = reactive({
  model: defaultEnergyModel(),
  baseItems: [
    { prop: "stationName", label: "站房名称", span: 6 },
    { prop: "location", label: "区域", span: 6 },
    // { prop: "stauts", label: "状态", span: 6 },
    {
      prop: "ePayType", label: "类型", span: 6,
      viewFormat: ({ prop }: any) => {
        return (<dict-tag options={epay_type.value} value={form.model[prop]} />)
      }
    },
    { prop: "totalUsage", label: "累计用电量", span: 6 },
    { prop: "totalPaid", label: "累计电费", span: 6 },
    { prop: "lastSettleTime", label: "上次结算时间", span: 6 },
    { prop: "unpaid", label: "待结算电量", span: 6 },
    { prop: "unsettle", label: "待结算费", span: 6 },
  ],
})
const loading = ref(false)

/** 取消 */
const handleCancel = () => {
  // proxy?.$tab.closeOpenPage()
  proxy?.$tab.closePage();
}
const getInfo = async (id: string) => {
  loading.value = true
  let res = await getEnergySummary(id)
  loading.value = false
  if (res.code == 200) {
    form.model = res.data
  } else {
    proxy?.$modal.msgError(res.msg || '信息获取失败！')
  }
}
if (orderId.value) {
  getInfo(orderId.value)
}
onMounted(() => {
})
</script>
